<template>
	<uv-modal :showConfirmButton="false" ref="modal" width="598rpx" full @close="modalClose">
		<view class="modal_centent relative">
			<image :src="`${imgPath}record/print-modal-bg.png`" class="modal_centent absolute" />
			
			<view class="flex flex-col absolute mb">
				<image :src="`${imgPath}record/info.svg`" class="modal_info-bg mx-auto" />
				
				<text class="mx-auto font-600 text-36 mt-30">详情提醒</text>
				<text class="mx-auto modal_tip text-26 mt-15">单词已复制到粘贴板~</text>
				
				<view class="m-top mx-50">
					<fui-button text="确认" @click="modal?.close" />
				</view>
			</view>
		</view>
	</uv-modal>
</template>

<script setup>
	
	import { ref, watch } from 'vue'
	import { imgPath } from '@/common/config'
	
	let prosp = defineProps({
		modelValue: {
			type: Boolean, 
			default: false
		},
		learnInfo: {
			type: Object,
			default: () => ({})
		}
	})
	
	let modal = ref(null)
	
	watch(() => prosp.modelValue, show => {
		show && modal.value?.open()
		!show && modal.value?.close()
	})
	
	let emits = defineEmits(['update:modelValue'])
	let modalClose = () => emits('update:modelValue', false)
	
</script>


<style scoped lang="scss"> 
	.modal_centent{height: 646rpx;width: 100%}
	.absolute{position: absolute;top: 0;bottom: 0;left: 0;right: 0}
	.modal_info-bg{height: 260rpx;width: 380rpx}
	.modal_close{position: absolute;right: 40rpx;top: 52rpx}
	.modal_tip{color: #4A4A4A}
	.mb{margin-top: 43rpx;margin-bottom: 43rpx}
</style>